<template>
  <div>
    <!--标题-->
    <top-caption :caption="status"></top-caption>
    <div v-if="movieMsg !== null">
      <div class="movie">
        <div class="poster">
          <img :src="movieMsg.poster">
        </div>
        <div class="info">
          <h3>{{movieMsg.title}}</h3>
          <el-rate
                  v-model="movieMsg.rank"
                  disabled
                  text-color="#ff9900"
                  text-template="{value}">
          </el-rate>
          <p>{{movieMsg.rank}}({{movieMsg.collect_count}}人评分)</p>
          <p>{{movieMsg.year}}年</p>
          <p>{{movieMsg.genres}}</p>
          <p>{{movieMsg.countries}}</p>
          <p>{{movieMsg.pubdate}}</p>
        </div>
      </div>
      <div class="other">
        <div class="stat">
          <span>{{movieMsg.wish_count}}人想看</span>
          <span>{{movieMsg.reviews_count}}人看过</span>
        </div>
        <div class="summary">
          {{movieMsg.summary}}
        </div>
        <div class="staff">
          <h3>演职人员</h3>
          <div class="casts">
            <div class="cast" v-for="cast in movieMsg.staff" @click="gotoStarMsg(cast.id)">
              <div class="photo"><img :src="cast.photo"></div>
              <div class="name">{{cast.name}}</div>
            </div>
          </div>
        </div>
        <div class="comments">
          <h3>热门短评</h3>
          <div class="comment" v-for="comment in movieMsg.smallComments">
            <el-rate
                    v-model="comment.rating"
                    disabled
                    :showText="true"
                    text-color="#666"
                    :text-template="comment.created_at">
            </el-rate>
            <p>{{comment.content}}</p>
            <div class="author clearfix">
              <div class="autoImage photo">
                <img :src="comment.author.photo">
              </div>&nbsp;&nbsp;&nbsp;&nbsp;{{comment.author.name}}
            </div>
          </div>

          <div class="button" @click="gotoSmallComment()">查看全部短论</div>
          <div class="button" @click="gotoLongComment()">查看全部长评</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {getMovieMsg} from 'src/api/index'
    import caption from './caption.vue'

    export default {
        components:{ 'top-caption': caption },
        props: {
            id:{
                type: String,
                required: true
            }
        },
        data: function () {
          return {
              status: '',
              movieMsg: null
          }
        },
        created: function () {
            let vm = this;
            vm.status = '正在加载...'
            getMovieMsg(this.id)
                .then(function (movieMsg) {
                vm.movieMsg = movieMsg
                vm.status = movieMsg.title
            })
                .catch(function(error){
                    vm.movieMsg = null
                    vm.status = '加载失败'
                })
        },

        methods: {
            goBack: function () {

                this.$router.go(-1)
            },
            gotoLongComment: function () {
                this.$router.push('/longComment/' + this.id)
            },
            gotoSmallComment: function () {
                this.$router.push('/smallComment/' + this.id)
            },
            gotoStarMsg: function (id) {
                console.log(id)
                this.$router.push('/starMsg/' + id)
            }
        }
    }
</script>

<style lang="scss" scoped>

  h3{
    color: #666;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .title{
    background-color: #e54847;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    position: relative;

    .mark{
      width: 13px;
      height: 13px;
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      margin: auto;
      border-bottom: 2px solid #fff;
      border-left: 2px solid #fff;
      transform:rotate(45deg);

      cursor: pointer;
    }
  }

  .movie{
    padding: 15px 0;
    background-color: #b4b1b1;
    color: #6b6868;
    position: relative;

    .poster{
      width: 102px;
      height: 141px;
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      margin: auto;
      border: 1px solid #fff;

      font-size: 0;
      vertical-align: middle;

      img{
        width: 100%;
        height: 100%;
      }
    }
    .info{
      min-height: 141px;
      margin-left: 134px;

      h3{
        font-size: 20px;
        color: #343232;
      }
    }
  }

  .other{
    background-color: #E5E9F2;
    padding: 0 10px;

    .stat{
      line-height: 60px;
      text-align: center;

      span{
        display: inline-block;
        background-color: #e54847;
        color: #fff;
        width: 100px;
        line-height: 30px;
        font-size: 14px;

        border-radius: 4px;
      }

      span+span{
        margin-left: 40px;
      }
    }

    .summary{
      margin: 10px 0;
      text-indent: 2em;
    }

    .staff{
      margin: 10px 0;

      .casts{
        overflow-x: scroll;
        .cast{
          display: inline-block;
          cursor: pointer;

          .photo{
            font-size: 0;

            width: 70px;
            height: 100px;

            img{
              width: 100%;
              height: 100%;
            }
          }
          .name{
            text-align: center;
            color: #666;
            line-height: 2em;
          }
        }

        .cast + .cast{
          margin-left: 10px;
        }
      }
    }

    .comments{
      margin: 10px 0;

      .comment{
        margin-top: 10px;
        border-bottom: 1px solid #d6d3d3;

        p{
            margin: 10px 0;
            text-indent: 2em;
        }

        .author{
          margin: 10px 0;
          line-height: 48px;
          color: #999;
          .photo{
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            float: left;
          }
        }
      }

      .button{
        color: #e54847;
        line-height: 30px;
        font-size: 15px;
        font-weight: lighter;
        text-align: center;
        border-bottom: 1px solid #d6d3d3;

        cursor: pointer;
      }
    }
  }
</style>